<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 英雄区域 -->
    <section class="bg-gradient-to-r from-green-800 to-green-900 text-white py-12 sm:py-16 lg:py-20">
      <div class="container mx-auto px-4 text-center">
        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6 text-white">算法学习平台</h1>
        <p class="text-lg sm:text-xl mb-6 sm:mb-8 max-w-2xl mx-auto">
          提升编程技能，掌握算法精髓，从基础到进阶，助你成为优秀的程序员
        </p>
        <div class="flex flex-col sm:flex-row justify-center gap-3 sm:gap-4">
          <router-link
            to="/questions"
            class="border-2 border-white text-white px-6 sm:px-8 py-3 rounded-lg font-semibold transition-all shadow-lg hover:shadow-2xl transform hover:scale-105 text-center"
          >
            开始刷题
          </router-link>
          <router-link
            to="/contests"
            class="border-2 border-white text-white px-6 sm:px-8 py-3 rounded-lg font-semibold transition-all shadow-lg hover:shadow-2xl transform hover:scale-105 text-center"
          >
            参加竞赛
          </router-link>
        </div>
      </div>
    </section>

    <!-- 公告栏 -->
    <section class="py-8 bg-white">
      <div class="container mx-auto px-4">
        <Card class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg border border-gray-300/60 overflow-hidden">
          <template #header>
            <div class="bg-gradient-to-r from-green-700 to-green-800 px-6 py-4">
              <div class="flex items-center">
                <div class="flex items-center space-x-3">
                  <div class="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center">
                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"></path>
                    </svg>
                  </div>
                  <h2 class="text-xl font-bold bg-gradient-to-r from-white to-blue-100 bg-clip-text text-transparent drop-shadow-md">系统公告</h2>
                </div>
                <div class="ml-auto">
                  <Button 
                    variant="ghost"
                    size="sm"
                    @click="refreshAnnouncements"
                    class="text-white/80 hover:text-white"
                  >
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                    </svg>
                  </Button>
                </div>
              </div>
            </div>
          </template>
          
          <!-- 加载状态 -->
          <LoadingSpinner v-if="announcementsLoading" text="加载中..." center />
          
          <!-- 错误状态 -->
          <ErrorState 
            v-else-if="announcementsError"
            :message="announcementsError"
            @retry="loadAnnouncements"
          />
          
          <!-- 空状态 -->
          <EmptyState 
            v-else-if="announcements.length === 0"
            title="暂无公告"
            description="目前没有系统公告"
            :icon="AnnouncementIcon"
            :show-action="true"
            action-text="刷新"
            @action="loadAnnouncements"
          />
          
          <!-- 公告列表 -->
          <div v-else class="space-y-4">
            <AnnouncementCard 
              v-for="announcement in announcements.slice(0, 3)" 
              :key="announcement.id"
              :announcement="announcement"
              @click="viewAnnouncementDetail"
            />
            
            <!-- 查看更多按钮 -->
            <div v-if="announcements.length > 3" class="text-center pt-4">
              <Button 
                variant="primary"
                size="sm"
                @click="showAllAnnouncements = true"
              >
                查看更多公告
              </Button>
            </div>
          </div>
        </Card>
      </div>
    </section>

    <!-- 功能特色 -->
    <section class="py-12 sm:py-16">
      <div class="container mx-auto px-4">
        <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-center mb-8 sm:mb-12 bg-gradient-to-r from-cyan-400 via-sky-500 to-blue-600 bg-clip-text text-transparent drop-shadow-md">平台特色</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
          <FeatureCard 
            v-for="feature in features"
            :key="feature.title"
            :icon="feature.icon"
            :title="feature.title"
            :description="feature.description"
            :color="feature.color"
          />
        </div>
      </div>
    </section>

    <!-- 最新题目 -->
    <section class="py-12 sm:py-16 bg-white">
      <div class="container mx-auto px-4">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 sm:mb-8 gap-4">
          <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold bg-gradient-to-r from-cyan-400 via-sky-500 to-blue-600 bg-clip-text text-transparent drop-shadow-md">最新题目</h2>
          <router-link to="/questions" class="text-black font-medium rounded-full px-4 py-1 hover:bg-gray-200 transition-colors border border-gray-300 whitespace-nowrap">
            查看更多 →
          </router-link>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
          <QuestionCard 
            v-for="(question, index) in latestQuestions" 
            :key="question.id"
            :question="question"
            :index="index"
            :current-page="1"
            :page-size="6"
            @favorite="handleFavorite"
            @unfavorite="handleUnfavorite"
          />
        </div>
      </div>
    </section>

    <!-- 排行榜入口 - 固定在右下角 -->
    <div class="fixed bottom-6 right-6 z-50">
      <router-link 
        to="/ranking" 
        class="group flex items-center space-x-3 bg-gradient-to-r from-yellow-500 to-orange-500 text-white px-6 py-4 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300"
      >
        <div class="flex items-center space-x-2">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
          </svg>
          <span class="font-semibold">排行榜</span>
        </div>
        <div class="hidden group-hover:block">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
          </svg>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { Question } from '@/types'
import { announcementApi } from '@/api/announcement'
import Card from '@/components/ui/Card.vue'
import Button from '@/components/ui/Button.vue'
import LoadingSpinner from '@/components/ui/LoadingSpinner.vue'
import EmptyState from '@/components/feedback/EmptyState.vue'
import ErrorState from '@/components/feedback/ErrorState.vue'
import AnnouncementCard from '@/components/business/AnnouncementCard.vue'
import QuestionCard from '@/components/business/QuestionCard.vue'
import FeatureCard from '@/components/business/FeatureCard.vue'
import { LightBulbIcon, BoltIcon, UsersIcon } from '@heroicons/vue/24/solid'
import type { Component } from 'vue'

// 响应式数据
const latestQuestions = ref<Question[]>([])

// 公告相关数据
const announcements = ref<any[]>([])
const announcementsLoading = ref(false)
const announcementsError = ref('')
const showAllAnnouncements = ref(false)

// 功能特色数据
type FeatureColor = 'blue' | 'green' | 'purple' | 'red' | 'yellow' | 'gray'
interface Feature { title: string; description: string; icon: Component; color: FeatureColor }
const features: Feature[] = [
  {
    title: '海量题库',
    description: '涵盖各大公司面试真题，从简单到困难，满足不同水平需求',
    icon: LightBulbIcon,
    color: 'blue'
  },
  {
    title: '实时竞赛',
    description: '定期举办算法竞赛，与全球程序员同台竞技，提升实战能力',
    icon: BoltIcon,
    color: 'green'
  },
  {
    title: '社区交流',
    description: '与同学一起学习讨论，分享解题思路和经验',
    icon: UsersIcon,
    color: 'purple'
  }
]

// 公告图标
const AnnouncementIcon = {
  template: `
    <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"></path>
    </svg>
  `
}

// 公告相关方法
const loadAnnouncements = async () => {
  announcementsLoading.value = true
  announcementsError.value = ''
  
  try {
    const response = await announcementApi.getAnnouncements({
      page: 1,
      page_size: 10,
      active: true
    })
    
    // 兼容两种返回结构：ApiResponse 包裹 或 原始列表
    const list = (response as any)?.data?.announcements || (response as any)?.announcements || []
    announcements.value = Array.isArray(list) ? list : []
  } catch (error: any) {
    console.error('加载公告失败:', error)
    announcementsError.value = error?.message || '加载公告失败'
    announcements.value = []
  } finally {
    announcementsLoading.value = false
  }
}

const refreshAnnouncements = () => {
  loadAnnouncements()
}

const viewAnnouncementDetail = (announcement: any) => {
  // 这里可以打开公告详情模态框或跳转到详情页面
  console.log('查看公告详情:', announcement)
}

const handleFavorite = (questionId: number) => {
  console.log('收藏题目:', questionId)
}

const handleUnfavorite = (questionId: number) => {
  console.log('取消收藏题目:', questionId)
}

onMounted(() => {
  loadAnnouncements()
})
</script>